<template>
  <el-row justify="space-between">
    <el-col :span="11">
      <!-- <el-input-number
      class="important-w-[100%]"
      v-model="model[0]"
      v-bind="controlAttrs[0]"
      v-on="controlOn[0]"
    /> -->
      <el-input-number class="important-w-[100%]" v-model="modelValue[0]" v-bind="controlAttrs[0]"
        v-on="controlOn[0]" />
    </el-col>
    <el-col class="my-0 text-center" :span="1">-</el-col>
    <el-col :span="11">
      <!-- <el-input-number
      class="important-w-[100%]"
      v-model="model[1]"
      v-bind="controlAttrs[1]"
      v-on="controlOn[1]"
    /> -->
      <el-input-number class="important-w-[100%]" v-model="modelValue[1]" v-bind="controlAttrs[1]"
        v-on="controlOn[1]" />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
defineOptions({
  name: "RangeInputs",
});

const props = defineProps({
  modelValue: {
    type: Array,
    default() {
      return [null, null];
    },
  },
  controlAttrs: {
    type: Array,
    required: true,
    default() {
      return [{}, {}];
    },
  },
  controlOn: {
    type: Array,
    required: true,
    default() {
      return [{}, {}];
    },
  },
});

const emit = defineEmits(["update:modelValue"]);

watch(
  [props.modelValue],
  () => {
    emit("update:modelValue", props.modelValue);
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped></style>
